<template>
  <div class="box">
    <el-form ref="form" :model="form" label-width="80px" :rules="rules">
      <el-card>
        <el-row :gutter="20">
          <el-col :span="14">
            <el-form-item label="标题" prop="name">
              <el-input v-model="form.name"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="内容">
              <div
                style="
                  border: 1px solid #dcdfe6;
                  border-radius: 4px;
                  z-index: 999;
                "
              >
                <Toolbar
                  style="border-bottom: 1px solid #ccc"
                  :editor="editor"
                  :defaultConfig="toolbarConfig"
                />
                <Editor
                  class="editor-box"
                  :defaultConfig="editorConfig"
                  :defaultContent="defaultContent"
                  v-model="html"
                  @onChange="onChange"
                  @onCreated="onCreated"
                />
              </div>
            </el-form-item>
          </el-col>
          <!--          <el-col :span="18">-->
          <!--            <el-form-item label="附件" v-model="form.fileList">-->
          <!--              <el-upload-->
          <!--                :action="uploadApi"-->
          <!--                :data="fileData"-->
          <!--                :headers="headers"-->
          <!--                :file-list="showFileList"-->
          <!--                :on-success="handleUpload"-->
          <!--                :on-remove="handleRemove"-->
          <!--                multiple-->
          <!--              >-->
          <!--                <el-button size="small" type="primary">上传附件</el-button>-->
          <!--              </el-upload>-->
          <!--            </el-form-item>-->
          <!--          </el-col>-->
        </el-row>
        <div>
          <el-button type="primary" @click="handleAdd(2)">提交</el-button>
          <el-button @click="handleAdd(1)">保存草稿</el-button>
        </div>
      </el-card>
    </el-form>
  </div>
</template>

<script>
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
import "@wangeditor/editor/dist/css/style.css";
import { mapMutations } from "vuex";
import { uploadAttachmentApi } from "@/api/modules/common.api";
import { insertHonorRollListApi } from "@/api/modules/honor.api";

export default {
  data() {
    // let self = this;
    return {
      visible: false,
      // imgsrc: [],
      active: 0,
      // moduleList: [],
      fileData: {
        objType: 1,
      },
      // add: true,
      // limit: 1,
      html: "",
      // previewsObj: {},
      // outChainFlag: false,
      rules: {
        name: [
          {
            required: true,
            message: "请输入标题",
            trigger: "change",
          },
        ],
      },
      form: {
        name: "",
        content: "",
        fileList: [],
      },
      headers: {
        Authorization: `Bearer ${localStorage.getItem("token")}`,
      },
      uploadApi: uploadAttachmentApi,
      // fileData: {
      //   objType: 1,
      // },
      filePicData: {
        objType: 0,
      },
      toolbarConfig: {
        // toolbarKeys: [ /* 显示哪些菜单，如何排序、分组 */ ],
        // excludeKeys: [ /* 隐藏哪些菜单 */ ],
      },
      fileList: [],
      // filePicList: [],
      showFileList: [],
      // showFilePicList: [],
      editor: null,
      defaultContent: [
        {
          type: "paragraph",
          lineHeight: "1.5",
          children: [{ text: "", fontFamily: "仿宋", fontSize: "22px" }],
        },
      ],
      editorConfig: {
        placeholder: "请输入内容...",
        MENU_CONF: {
          //配置上传图片
          uploadImage: {
            // 自定义上传图片 方法
            // customUpload: this.uploadImg,
            // 自定义插入图片 方法
            // customInsert: this.insertImg,
            //server必须要配置正确,我这里因为上传图片有点特殊，在下面方法配置了，所以此处不用配置地址
            server: uploadAttachmentApi,
            // maxFileSize: 4 * 1024 * 1024, // 1M
            // 最多可上传几个文件，默认为 100
            maxNumberOfFiles: 100,
            // 选择文件时的类型限制，默认为 ['image/*'] 。如不想限制，则设置为 []
            // allowedFileTypes: [],
            // 自定义上传参数，例如传递验证的 token 等。参数会被添加到 formData 中，一起上传到服务端。
            fieldName: "file",
            headers: {
              Authorization: `Bearer ${localStorage.getItem("token")}`,
            },
            meta: {
              objType: 2,
            },
            // 将 meta 拼接到 url 参数中，默认 false
            metaWithUrl: false,
            // 跨域是否传递 cookie ，默认为 false
            withCredentials: false,
            // 超时时间，默认为 10 秒
            timeout: 5 * 1000, // 5 秒
            // onBeforeUpload(file) { // TS 语法
            //   // onBeforeUpload(file) {    // JS 语法
            //   // file 选中的文件，格式如 { key: file }
            //   return file
            //
            //   // 可以 return
            //   // 1. return file 或者 new 一个 file ，接下来将上传
            //   // 2. return false ，不上传这个 file
            // },

            // 上传进度的回调函数
            // onProgress(progress) {  // TS 语法
            //   // onProgress(progress) {       // JS 语法
            //   // progress 是 0-100 的数字
            //   console.log('progress', progress)
            // },

            // 单个文件上传成功之后
            // onSuccess(file, res) {
            //   // TS 语法
            //   // onSuccess(file, res) {          // JS 语法
            //   // console.log(`${ file.name } 上传成功`, res)
            //
            //   // console.log(this.form.arrt)
            //   // self.handleUpload(res);
            // },

            // 单个文件上传失败
            onFailed(file, res, error) {
              // TS 语法
              // onFailed(file, res) {           // JS 语法
              console.log(`${file.name} 上传失败`, res);
              console.log("error", error);
            },

            // 上传错误，或者触发 timeout 超时
            onError(file, err, res) {
              // TS 语法
              // onError(file, err, res) {               // JS 语法
              console.log(`${file.name} 上传出错`, err, res);
            },

            // customUploadImg(files, insert) {
            //   console.log('files', files)
            //   console.log('insert', insert)
            // }
          },
          // 配置上传视频（同上传图片）
          // uploadVideo: {},
        },
      },
    };
  },
  components: {
    Editor,
    Toolbar,
  },
  methods: {
    ...mapMutations("base", ["setBreadcrumb"]),
    getContent() {
      return this.form.content;
    },
    onCreated(editor) {
      this.editor = Object.seal(editor); // 【注意】一定要用 Object.seal() 否则会报错
    },
    onChange(editor) {
      this.form.content = editor.getHtml();
    },
    async handleAdd(status) {
      this.form.status = status;
      this.$refs.form.validate(async (valid) => {
        if (valid) {
          await insertHonorRollListApi(this.form);
          this.$message({
            message: "成功",
            type: "success",
          });
          await this.$router.push({ path: "/writings/honor" });
          this.setBreadcrumb([
            {
              name: "文章管理",
              path: "/writings",
            },
            {
              name: "光荣榜",
              path: "/honor/list",
            },
          ]);
        }
      });
    },
    handleUpload(response, f, fileList) {
      this.form.fileList = [];
      fileList.forEach((item) => {
        if (item.response.errno === 0) {
          this.form.fileList.push(item.response.data.attrId);
        }
      });
    },
    handleRemove(file, fileList) {
      this.form.fileList = [];
      fileList.forEach((item) => {
        if (item.response.errno === 0) {
          this.form.fileList.push(item.response.data.attrId);
        }
      });
    }
  },
  beforeDestroy() {
    const editor = this.editor;
    if (editor == null) return;
    editor.destroy();
  },
};
</script>
<style scoped>
.box {
  height: calc(100vh - 60px - 50px - 48px);
  overflow: auto;
}
.editor-box {
  height: calc(100vh - 60px - 50px - 48px - 200px);
  overflow-y: hidden;
}
</style>
